<template>
  <!-- 收费明细 -->
  <section class="printOrder">
    <div class="print_box">
      <!-- <h3 style="text-align:center;">{{hospital}}</h3> -->
      <div class="print-header-box">
        <h3 class="print_head_title_box">
          <img class="print-logo_img" src="/img/bf_logo.png" />
          费用清单
        </h3>
        <p>
          <!-- <span style="display:inline-block;margin-left:20px;font-size:12px;">{{hospital}}</span> -->
          <span style="display:inline-block;margin-left:30px;font-size:12px; color:#232429">重庆北部妇产医院</span>
          <span style="float:right;margin-right:30px;font-size:12px; color:#232429">单位：元</span>
        </p>
        <ul class="nav_patient_menu">
          <li>姓 名：{{detail.name}}</li>
          <li>性 别：{{detail.sex | toSex}}</li>
          <li>出生日期：{{detail.birthday}}</li>
          <li>证 件 号：{{detail.idCard}}</li>
          <li>病历号：{{detail.archivesCode}}</li>
          <li>收费日期：{{time}}</li>
        </ul>
      </div>
      <!-- <div class="print_tack_box">
        <div class="tick-item_box">
           <span class="tick-item"></span>
           <span class="tick-item">项目</span>
           <span class="tick-item">数量</span>
           <span class="tick-item">金额</span>
           <span class="tick-item"></span>
        </div>
        <div class="tick-item_content">
          <div v-for="(item,index) in itemList" :key="index">
             <span class="tick-item"></span>
             <span class="tick-item">{{item.cureDetailDTO.sourceName}}</span>
             <span class="tick-item">{{item.cureDetailDTO.num}}</span>
             <span class="tick-item">{{item.realityMoney}}元</span>
             <span class="tick-item"></span>
          </div>
        </div>
      </div>-->
      <div class="item_content">
        <!-- <p class="print_line" v-if="itemList.length<40" style="left:30px;"></p>
        <p class="print_line"  v-if="itemList.length<40" style="left:412px;"></p>
        <p class="print_line"  v-if="itemList.length<40" style="right:220px;"></p>
        <p class="print_line"  v-if="itemList.length<40" style="right:30px;"></p>-->
        <table class="table-box">
          <!-- <thead>
          <tr>
            <th style="width:10px;"></th>
            <th>项目</th>
            <th>数量</th>
            <th>金额</th>
            <th style="width:10px;"></th>
          </tr>
          </thead>-->
          <!-- <tbody>
          </tbody>-->
          <tr class="thead">
            <td style="width:10px;"></td>
            <td>项目</td>
            <td>数量</td>
            <td>金额</td>
            <td style="width:10px;"></td>
          </tr>
          <tr v-for="(item,index) in itemList" :class="{'active_item':item.show}" :key="index">
            <td v-if="item.show==false" style="width:10px;"></td>
            <td v-if="item.show==false">{{item.cureDetailDTO.sourceName}}</td>
            <td v-if="item.show==false">{{item.cureDetailDTO.num}}</td>
            <td v-if="item.show==false">{{item.realityMoney}}</td>
            <td v-if="item.show==false" style="width:10px;"></td>
            <td v-if="item.show" colspan="5"></td>
          </tr>
          <!-- <tr v-for="(item,index) in 50"  :key="index">
           <td></td>
           <td>aaaa</td>
           <td>bbb</td>
           <td>css</td>
           <td></td>
          </tr> -->
        </table>
      </div>
      <!-- <div class="fixed_line"></div> -->
      <div class="footer_box print_footer_box">
        <p style="width:32%;margin-left:20px;">
          费用合计：
          <span style="color:#000;font-size:24px;">￥{{totalMoney | changeMoneyToTwo}}</span>
          <span style="font-size:12px">元</span>
        </p>
        <p>药 师：</p>
        <p>退 款 人：</p>
        <p>客户签字：</p>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  props: ["orderId", "detail", "name", "time"],
  data() {
    return {
      hospital: "",
      itemList: [],
      dwList: [],
      totalMoney: 0,
      total: 0,
      flog: 40
    };
  },
  mounted() {
    // this.getHospital();
    // this.getBasic();
    this.hospital = this.adminUser.hospitalName;
    this.getOrderItem();
  },
  methods: {
    //获取医院
    // getHospital() {
    //   let th = this;
    //   let j = {
    //     id: th.adminUser.hpId
    //   };
    //   th.$api.getHospitalById(j).then(res => {
    //     if (res.executed) {
    //       th.hospital = res.dataBody.list[0];
    //     }
    //   });
    // },
    getOrderItem() {
      let th = this;
      th.showLoading();
      th.$api.getOrderItem({ orderId: th.orderId }).then(res => {
        if (res.executed) {
          let item = res.dataBody.pageInfo.list;
          let list = [];
          let total = 0;
          for (let i = 0; i < item.length; i++) {
            let arr = {};
            Object.assign(arr, item[i]);
            if (i != 0) {
              if (i % 40 == 0) {
                arr.realityMoney = Number(arr.realityMoney).toFixed(2);
                arr.discountMoney = 0;
                arr.show = false;
                total += Number(arr.realityMoney);
                list.push({ show: true });
              } else {
                arr.realityMoney = Number(arr.realityMoney).toFixed(2);
                arr.discountMoney = 0;
                arr.show = false;
                total += Number(arr.realityMoney);
              }
            }else{
              arr.realityMoney = Number(arr.realityMoney).toFixed(2);
                arr.discountMoney = 0;
                arr.show = false;
                total += Number(arr.realityMoney);
            }
            list.push(arr);
          }
          th.totalMoney = total.toFixed(2);
          th.total = total.toFixed(2);
          th.itemList = list;
          setTimeout(function() {
            window.document.body.innerHTML = document.getElementsByClassName("printOrder")[0].innerHTML;
            th.showLoading(false);
            window.print();
            window.location.reload();
          }, 1000);
        }
      });
    },
    getBasic() {
      let th = this;
      th.getCommonConfigByKey("药品剂量单位").then(res => {
        th.dwList = res;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@media print {
  @page {
    // orphans: 10;
    // padding-bottom:80px !important;
    // @bottom-center {
    //   height: 80px;
    //   page-break-after: always;
    // }
    // table {
    //   orphans: 10;
    //   widows: 10;
    //   page-break-before: always;
    // }
  }
}
.font-w{
  font-weight: bold
}
.active_item {
  border-top: 1px solid #313131;
  height: 100px !important;
}
// tr:nth-child(36n) {
//   border-top: 1px solid #313131;
//   height: 160px !important;
// }
.print_box {
  height: 100%;
  padding: 0px;
  orphans: 3;
  // page-break-inside: avoid;
  position: relative;
}
.print-header-box {
  // position: absolute;
  // top:10px;
  // left:0px;
  background-color: #fff;
  display: inline-block;
  width: 100%;
  margin-top: 30px;
  // right:0px;
}
.print-logo_img {
  width: 140px;
  position: absolute;
  left: 30px;
  top: -2px;
}
.fixed_line {
  position: fixed;
  border-top: 1px solid #313131;
  width: 100%;
  left: 0px;
  bottom: 79px;
}
.print_line {
  // width: 1px;
  height: 100%;
  border: 0.5px dashed #313131;
  position: absolute;
}
.item_content {
  // position: absolute;
  // top:140px;
  // left:0px;
  display: inline-block;
  width: 100%;
  min-height: 75%;
  // page-break-after: always;
  // right:0px;
}
.print_head_title_box {
  text-align: center;
  font-size: 30px;
  position: relative;
  height: 35px;
  line-height: 20px;
  margin-bottom: 10px;
}
.print_footer_box {
  border-top: 1px solid #313131;
  padding: 20px 0px 0px 0px;
  bottom: 0px;
  display: block;
  // height:100px;
  background-color: #fff;
  // left:0px;
  // right:0px;
  width: inherit;
  position: relative;
  z-index: 2222;
  p {
    width: 20%;
    font-size: 14px;
  }
}
.print_tack_box {
  width: 100%;
  height: 80%;
  .tick-item_box {
    display: inline-block;
    width: 100%;
  }
  .tick-item_content {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
}
.nav_patient_menu {
  border-top: 1px solid #313131;
  margin-top: 5px;
  padding: 15px 30px 7px 30px;
  overflow: hidden;
  li {
    font-size: 14px;
    margin-bottom: 5px;
  }
}
.table-box {
  border-top: 1px dashed #313131;
  orphans: 10;
  // widows: 5;
  // page-break-after: always;
  // height:100%;
  thead {
    display: none;
    tr {
      border-bottom: 1px dashed #313131;
      > th {
        font-size: 14px;
        // border-right: 1px dashed #313131;
      }
      th:last-child {
        border-right: 0px;
      }
    }
  }
  tr {
    border-bottom: 0px;
    height: 32px;
    > td {
      font-size: 14px;
      padding: 0px 10px;
      // border-right: 1px dashed #313131;
    }
    td:last-child {
      border-right: 0px;
    }
  }
  tr:nth-child(2) td{
    padding-top: 20px;
    padding-bottom: 8px;
  }

  .thead {
    margin-bottom: 20px;
    border-bottom: 1px dashed #313131 !important;
    height: 50px;
    td {
      font-size: 16px;
      // border-right: 1px dashed #313131;
    }
  }
  thead:first-child {
    display: table-header-group;
  }
  // tbody {
  //   // height: 85%;
  // }
}
</style>
